<script setup>
/**
 * @name 查看图文剪辑组抽屉
 */

import {ref, reactive, computed} from 'vue'
import {
  EyeOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons-vue";
const props = defineProps({
  // 发布至平台列表
  accountList: {
    type: Array,
    default: () => [],
  }
});

const state = reactive({
    visible: false,
     // 全选
    checkAll: false,
    // 渲染的列表
    lsit: [],
    // 当前预览的项
    item: null,
    // 当前预览项的id
    id: '',
    viewImgvisible: false,
    // 预览图片的链接
    imgUrl:''
})

// 全部勾选的项
const selectItems = computed(() => {
  return state.lsit.filter((ele) => ele?.checked) || [];
});


//预览图片
const toView = (item) => {
    state.imgUrl = item.material_url
    state.viewImgvisible = true
}
const open = (params={}) => {
    const {id,item} = params
    console.log(id,item,'预览组的数据');
    state.item = item
    state.list = item?.medias
    state.id = id
  state.visible = true;
}
const close = () => {
  state.visible = false;
}
defineExpose({
    open,
    close
})
</script>

<template>
        <a-drawer
    v-model:visible="state.visible"
    :destroyOnClose="true"
    class="custom-class"
    style="color: red"
    placement="right"
    :style="{
      'min-width': visible ? '1000px' : 0,
    }"
    :bodyStyle="{
      paddingTop: 0,
      color: '#42464e',
    }"
    :closable="false"
    :maskClosable="false"
    :keyboard="true"
    width="1000px"
  > 
  <slot name="title">
      <div class="title_box">
        <h2>查看图集 </h2>
      </div>
    </slot>

    <div class="content">

      <div class="center_list_box">
          <!-- @click="selectItem(item)" -->
        <div
          class="video_list_item"
          v-for="item in state.list"
          :key="item.id"
        >
          <EyeOutlined
            class="toView"
            @click.stop="toView(item)"
          >
          </EyeOutlined>
          <!-- <a-checkbox
            class="checkbox"
            v-model:checked="item.checked"
          ></a-checkbox> -->
          <div class="material_box">
            <!-- <img :src="item?.poster" alt="" v-if="item?.poster" /> -->

            <img :src="item.material_url" alt="" 
            style="width: 100%; height: 100%;  
            object-fit: contain; 
            transform-origin: center;">
          </div>
          <div class="cart_msg" v-if="false">
            <span class="cart_type"
              >图片
              <VideoCameraOutlined />
            </span>
            <span class="cart_time">{{ item.material_duration_text }}</span>
          </div>

          <div class="video_name">{{ item.multimedia_name || "" }}</div>
        </div>
      </div>

      <!-- 分页器 -->
      <div class="pagination_box" v-if="false">
        <div class="page-total">共 {{ state.total }} 条</div>
        <a-pagination
          :total="state.total"
          :pageSize="state.queryData.pageSize"
          showSizeChanger="true"
          @change="PageChange"
        />
      </div>
    </div>
    <template #footer>
      <div class="bottom_btn">
        <a-button style="margin-right: 15px" @click="close"
          >取消</a-button
        >
        <a-button type="primary" @click="close" :loading="submitLoading"
          >确定</a-button
        >
      </div>
    </template> 
  </a-drawer>

      <!-- 图片预览 -->
      <a-modal v-model:visible="state.viewImgvisible" title="图片预览" >
      <div class="view_img_content">
        <img :src="state.imgUrl" alt="" />
      </div>
      <template #footer>
        <a-button @click="state.viewImgvisible = false">关闭</a-button>
      </template>
    </a-modal>
</template>

<style lang="less" scoped>
:deep(.ant-spin-container) {
  background-color: #131313;
  overflow: hidden;
}

.view_img_content {
width: 100%;
height: 500px;
display: flex;
justify-content: center;
background: #000000;

img {
height: 100%;
width: 100%;
object-fit: contain;
}
}

.title_box {
  padding: 20px 0;

  h2 {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
  }
}

// 整体样式
.content {
  width: 100%;
  height: calc(100% - 68px);
  // padding-top: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  // 头部全选等控制按钮
  .title_controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;

    .title_controls_right {
      display: flex;
      gap: 0 10px;
    }
  }

  // 中间列表
  .center_list_box {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 170px));

    &::-webkit-scrollbar {
      width: 8px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      background: #888;
      /* 滑块的背景颜色 */
      border-radius: 10px;
      /* 滑块的圆角 */
    }

    .video_list_item {
      height: 310px;
      width: 100%;
      background: #000;
      display: flex;
      // justify-content: center;
      flex-direction: column;
      align-items: center;
      position: relative;
      cursor: pointer;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        width: 100%;
        height: calc(100% - 30px);
        background: transparent;
        cursor: pointer;
        transition: all 0.3s;
      }

      &:hover {
        &::after {
          background: rgba(0, 0, 0, 0.5);
        }

        .toView {
          opacity: 1;
        }
      }

      .video_name {
        color: #000;
        font-weight: 600;
        background-color: #fff;
        width: 100%;
        line-height: 2;
        height: 30px;
        /* 溢出内容隐藏 */
        overflow: hidden;
        /* 文本溢出显示省略号 */
        text-overflow: ellipsis;
        /* 文本在一行显示 */
        white-space: nowrap;
      }

      .material_box {
        height: calc(100% - 30px);
        width: 100%;
        position: relative;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        video {
          width: 100%;
          height: 100%;
        }
      }

      // 预览小眼睛
      .toView {
        position: absolute;
        top: 40%;
        left: 50%;
        z-index: 9;
        opacity: 0;
        transition: all 0.3s;
        font-size: 25px;
        color: #fff;
        transform: translate(-50%);
        cursor: pointer;

        &:hover {
          color: var(--ss-primary-color-active);
        }
      }

      .checkbox {
        position: absolute;
        top: 3%;
        left: 10%;
        z-index: 9;
        transition: all 0.3s;
      }

      // 删除
      .cart_msg {
        display: flex;
        flex-direction: column;
        gap: 5px;
        position: absolute;
        bottom: 12%;
        left: 20%;
        z-index: 9;
        transition: all 0.3s;
        font-size: 13px;
        color: #fff;
        transform: translate(-50%);
        cursor: pointer;

        // &:hover {
        //   color: red;
        // }
      }
    }

    .loding_item {
      height: 310px;
      width: 100%;
      background-color: #e7e7e7;
      align-items: center;
      padding: 15px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border-radius: 5px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;

      .loding_progress {
        width: 100%;
      }

      .loding_text {
        font-weight: 600;
      }

      .loding_dec {
        .loding_dec_text {
          color: #9b9b9b;
          margin-left: 5px;
        }
      }
    }
  }

  // 分页器
  .pagination_box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
  }
}

// 底部按钮
.bottom_btn {
  padding: 8px 24px;
  display: flex;
  justify-content: flex-end;
  background-color: #fff;
}
</style>